<template>
  <div>
    <el-card shadow="hover" :body-style="{ height: '750px' }" v-if="step == 1">
      <div class="card-header">
        <p class="card-header-title">事故分布图</p>
      </div>
      <v-chart
        class="map-chart"
        :option="geoMapOptions"
        ref="elMapRef"
        @click="step++"
      />
    </el-card>
    <el-card shadow="hover" :body-style="{ height: '750px' }" v-if="step == 2">
      <div class="card-header">
        <p class="card-header-title cursor" @click="step--">事故分布图</p>
      </div>
      <v-chart
        class="map-chart"
        :option="geoMapOptions2"
        ref="elMapRefs"
        @click="step++"
      />
    </el-card>

    <el-card shadow="hover" :body-style="{ height: '750px' }" v-if="step == 3">
      <div class="card-header">
        <p class="card-header-title cursor" @click="step--">事故分布图</p>
      </div>
      <v-chart
        class="map-chart"
        :option="geoMapOptions3"
        ref="elMapRefss"
      />
      <div class="circle" @click="step++">

</div>
    </el-card>

    <el-card shadow="hover" :body-style="{ height: '750px' }" v-if="step == 4" class="po">
      <div class="card-header">
        <p class="card-header-title cursor" @click="step--">事故分布图</p>
      </div>
      <v-chart class="map-chart" :option="geoMapOptions4" ref="elMapRefsss" />
      
    </el-card>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import { use, registerMap, getInstanceByDom } from "echarts/core";
import { MapChart } from "echarts/charts";
import { GraphChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import VChart from "vue-echarts";
import chinaMap from "@/utils/china";
import beijingMap from "@/utils/maps/beijing";
import chaoyangMap from "@/utils/maps/chaoyang";
import { onMounted, ref } from "vue";
import { getAccidents } from "../../api/index";
import { geoMapOptions } from "./mapOptions";
import { geoMapOptions2 } from "./mapOptions";
import { geoMapOptions3 } from "./mapOptions";
import { geoMapOptions4 } from "./mapOptions";
import {
  TooltipComponent,
  VisualMapComponent,
  ToolboxComponent,
} from "echarts/components";

use([
  CanvasRenderer,
  MapChart,
  GraphChart,
  TooltipComponent,
  VisualMapComponent,
  ToolboxComponent,
]);
const elMapRef = ref(null);
registerMap("china", chinaMap);
registerMap("beijing", beijingMap);
registerMap("chaoyang", chaoyangMap);
geoMapOptions.tooltip = {
  trigger: "item",
  triggerOn: "click",
  formatter: (params) => {
    console.log(params);

    name = params.name;
    if (name == "北京") {
      console.log(elMapRef.value);

      geoMapOptions.geo.map = "beijing";
      registerMap("beijing", beijingMap);
      // elMapRef.value.clear();
    }
  },
};
var step = ref(1);

// geoMapOptions.series.data = [];

// let adcodeStack = [100000];
// let mapNameStack = ["china"];

// function loadMap(adcode, name) {
//     chinaMapChart.showLoading();
//     $.get(
//         `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`,
//         function (geoJson) {
//             chinaMapChart.hideLoading();
//             chinaMapChart.clear();
//             echarts.registerMap(name, { geoJSON: geoJson });
//             chinaMapOption.geo.map = name;
//             chinaMapOption.title.text = name === "china" ? "中华人民共和国" : name;
//             chinaMapChart.setOption(chinaMapOption);
//         }
//     ).fail(function () {
//         chinaMapChart.hideLoading();
//         const failedCity = mapNameStack.pop();
//         const failedAdcode = adcodeStack.pop();
//         alert("获取" + failedCity + "的地图数据失败: " + failedAdcode);
//     });
// }

// // 获取并显示初始地图
// loadMap(
//     adcodeStack[adcodeStack.length - 1],
//     mapNameStack[mapNameStack.length - 1]
// );

// // 当用户点击地图上的一个区域时，获取并显示相应的地图
// chinaMapChart.on("click", function (params) {
//     const name = params.name;
//     // 从 GeoJSON 数据中获取 adcode
//     const adcode = getAdcodeFromGeoJSON(name);
//     if (adcode !== null) {
//         adcodeStack.push(adcode);
//         mapNameStack.push(name);
//         loadMap(adcode, name);
//     }
// });

// // 从 GeoJSON 数据中获取 adcode
// function getAdcodeFromGeoJSON(name) {
//     const geoJSON = echarts.getMap(chinaMapOption.geo.map).geoJSON;
//     for (let feature of geoJSON.features) {
//         if (feature.properties.name === name) {
//             return feature.properties.adcode;
//         }
//     }
//     return null;
// }
</script>
<style scoped>
.map-chart {
  width: 100%;
  height: 700px;
}
.cursor {
  cursor: pointer;
}
.po{
    position: relative;
}
.circle{
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
}
</style>
